<template>
    <div>
        <div class="Onlinecpdz_Box" @click="openCustomOrder">
            <div class="Onlinecpdz_dz">
                <a class="dizhi">产品
                <br/>定制</a>
            </div>
        </div>
        <el-dialog
            title="产品定制"
            :visible.sync="dialogDzVisible"
            :close-on-click-modal="false"
            width="42%"
            top="2%">
            <div class="dialog-content dz_content">
                <el-form ref="customForm" :model="customForm" status-icons :show-message="false" label-width="25%" label-position="left">
                    <el-form-item label="生产企业" required prop="factory_id">
                        <el-select v-model="customForm.factory_id" placeholder="请选择生产企业" @change="switchFactory">
                            <el-option :label="item.name" :value="item.id" v-for="(item, index) in customFactory" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品名称" required prop="goods_id" ref="goods_id">
                        <el-select v-model="customForm.goods_id"  placeholder="请选择或输入产品名称" @change="switchGoods">
                            <el-option :label="item.title" :value="item.id" v-for="(item, index) in customGoods" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品型号" prop="models" ref="models">
                        <el-input v-model="customForm.models" disabled placeholder="选择产品后对应生成"></el-input>
                    </el-form-item>
                    <el-form-item label="产品规格" required prop="goods_sku_name">
                        <el-input v-model="customForm.goods_sku_name" placeholder="请输入产品规格"></el-input>
                    </el-form-item>
                    <el-form-item label="产品备注" prop="goods_remark">
                        <el-input type="textarea" v-model="customForm.goods_remark" placeholder="请填写产品定制要求及备注"></el-input>
                    </el-form-item>
                    <el-form-item label="数量" required>
                        <el-input-number v-model="customForm.goods_num" :min="1" label="描述文字" ></el-input-number>
                    </el-form-item>
                    <el-form-item label="产品价格" required>
                        <el-input-number v-model="customForm.goods_price" :min="0" :precision="2" label="描述文字" ></el-input-number>
                        <!-- <el-input v-model="customForm.price" placeholder="请输入产品价格"></el-input> -->
                    </el-form-item>
                    <el-form-item label="附件">
                        <div class="flex align-center">
                            <el-upload
                                :action="uploadImgUrl"
                                :on-success="handleSuccess"
                                multiple
                                :limit="1"
                                :before-upload="handleBeforeUpload"
                                :headers="headers"
                                ref="uploadFile"
                                :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">支持txt、doc、xls、jpg格式, 文件大小不超过5MB</div>
                            </el-upload>
                        </div>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="customForm.remark" placeholder="请填写备注信息"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn-main" @click="customSubmit">定制提交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import api from "@/api/product";
import factoryApi from "@/api/factory";
import enterpriseApi from "@/api/enterprise";
import { baseURL, baseURLApi } from "@/utils/request";
import { getToken } from "@/utils/auth";
export default {
    data() {
        return {
            dialogDzVisible: false,
            dialogSqVisible: false,
            dialogCgVisible: false,
            form: {
                sku: [],
                price: 0,
                num: 1
            },
            num: 1,
            imageUrl: '',
            // 页面查询参数
            queryParams: {
                page: 1,
                pageSize: 10,
                factory_id: null,
                keyword: ""
            },
            data: {
                data: [],
                total: 0
            },
            factoryList: [], // 厂商数据
            pageHidden: true,
            loading: false,
            defaultEnterprise: {},
            // 定制产品
            customForm: {
                goods_num: 1,
                goods_price: 0,
                goods_id: null,
                goods_title: null,
                models: null,
                annex: "",
                goods_sku_id: 0
            },
            customFactory: [],
            customGoods: [],
            uploadImgUrl: baseURLApi + "/api.common/upload", // 上传的图片服务器地址
            fileType: ['txt', "doc", "docx", "xls", "xlsx", "jpg", "png", "jpeg"],
            fileList: [],
            headers: {
                token: getToken(),
            },
            fileSize: 5,
            // 样品申请
            sampleForm: {}
        };
    },
    mounted: function () {
        this.LoadFactoryList();
    },
    methods: {
        // 加载授权厂商
        LoadFactoryList: function () {
            var _this = this;
            factoryApi.GetFactoryList({})
                .then((res) => {
                    _this.customFactory = res.data;
                })
        },
        // 切换企业
        switchFactory: function (val) {
            var input = {
                factory_id: val
            }
            this.$refs.goods_id.resetField();
            this.$refs.models.resetField();
            factoryApi.GetFactoryGoodsList(input)
                .then((res) => {
                    this.customGoods = res.data;
                })
        },
        // 切换商品
        switchGoods: function (val) {
            var goods = this.customGoods.find(x => x.id == val);
            this.customForm.models = goods.models;
            this.customForm.goods_title = goods.title;
        },
        // 上传前的执行方法
        handleBeforeUpload(file) {
            let isImg = false;
            if (this.fileType.length) {
                let fileExtension = "";
                if (file.name.lastIndexOf(".") > -1) {
                    fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
                }
                isImg = this.fileType.some(type => {
                    if (file.type.indexOf(type) > -1) return true;
                    if (fileExtension && fileExtension.indexOf(type) > -1) return true;
                    return false;
                });
            } else {
                isImg = file.type.indexOf("image") > -1;
            }

            if (!isImg) {
                this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
                return false;
            }

            if (this.fileSize) {
                const isLt = file.size / 1024 / 1024 < this.fileSize;
                if (!isLt) {
                    this.$message.error(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
                    return false;
                }
            }
        },
        // 图片上传成功
        handleSuccess: function (res, file) {
            if (res.code == 1) {
                // this.imageUrl = res.data.fullurl;
                this.customForm.annex = res.data.url;
            } else {
                this.$message.error("图片上传失败");
            }
        },
        // 打开定制订单的弹框
        openCustomOrder: function () {
            this.dialogDzVisible = true;
            if (this.$refs.customForm) {
                this.$refs.customForm.resetFields();
                this.$refs.uploadFile.clearFiles();
            }
        },
        // 提交定制订单
        customSubmit: function () {
            this.$refs.customForm.validate((val) => {
                if (val) {
                    var input = {
                        goods_list: [
                            this.customForm
                        ],
                        remark: this.customForm.remark
                    }
                    api.AddCustomOrder(input)
                        .then((res) => {
                            this.$message.success("成功提交");
                            this.$refs.uploadFile.clearFiles();
                            this.dialogDzVisible = false;
                        })
                }
            })
        },
    }
}
</script>